<template>
  <view class="container">
    <!-- navbar -->
    <FilterNavbar resetToInit v-model:queryParam="queryParam" :searchList="searchList" @confirm="loadData">
      <template #center>
        <!-- 切换 -->
        <view class="order-type-list">
          <view class="order-type-item" :class="{ actived: activeTap == 'car-stock' }" @tap="tapChange('car-stock')">
            车辆库存
            <view class="order-type-item-border"></view>
          </view>
          <view class="order-type-item" :class="{ actived: activeTap == 'model-stock' }" @tap="tapChange('model-stock')">
            车型库存
            <view class="order-type-item-border"></view>
          </view>
        </view>
      </template>
    </FilterNavbar>
    <!-- 车辆库存 -->
    <car-stock v-if="activeTap == 'car-stock'" ref="stockRef" :parentQueryParam="queryParam" />
    <!-- 车型库存 -->
    <model-stock ref="stockRef" v-else />
  </view>
</template>

<script setup>
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import { ref, computed, onMounted, nextTick } from 'vue'
  import dayjs from 'dayjs'
  import FilterNavbar from '@/components/FilterNavbar'
  import CarStock from './car-stock/index'
  import ModelStock from './model-stock/index.vue'
  import { getSiteList } from '@/api/asset/car-stock'
  import { usePageDict } from '@/hooks/useDict'

  const dict = usePageDict('carStockDict')
  const today = dayjs()
  // 查询参数
  const queryParam = ref({
    siteId: undefined,
    seriesIdList: undefined,
    modelIdList: undefined,
    carIdList: undefined,
    typeList: [],
    // 默认14天
    startTime: today.format('YYYY-MM-DD'),
    endTime: today.add(13, 'day').format('YYYY-MM-DD'),
    channelTypeList: undefined,
  })

  const activeTap = ref('car-stock')
  // 顶部 tab 点击
  const tapChange = (type) => {
    activeTap.value = type
    loadData()
  }

  const stockRef = ref()
  const loadData = () => {
    calcParamRangtime()
    nextTick(() => {
      stockRef.value.loadData(queryParam.value)
    })
  }
  // 计算结束时间，最小1天最大100天
  const calcParamRangtime = () => {
    const query = queryParam.value
    const { startTime, endTime } = query
    const start = dayjs(startTime).startOf('day')
    const min = start.add(1, 'day').subtract(1, 'second')
    const max = start.add(100, 'day').subtract(1, 'second')
    query.startTime = start.format('YYYY-MM-DD 00:00:00')
    query.endTime = dayjs(endTime).format('YYYY-MM-DD 23:59:59')
    if (min.isAfter(endTime)) {
      query.endTime = min.format('YYYY-MM-DD HH:mm:ss')
    }
    if (max.isBefore(endTime)) {
      query.endTime = max.format('YYYY-MM-DD HH:mm:ss')
    }
  }

  const siteName = ref()
  const searchList = computed(() => {
    return [
      {
        prop: 'siteId',
        label: '门店',
        type: 'remote-select',
        attrs: {
          label: siteName.value,
          type: 'site_all',
          params: { oldId: queryParam.value.siteId },
          required: true,
          change: (form, labelForm, searchList, val) => {
            form.value.seriesIdList = undefined
            form.value.modelIdList = undefined
            form.value.carIdList = undefined
            labelForm.value.seriesIdList = undefined
            labelForm.value.modelIdList = undefined
            labelForm.value.carIdList = undefined
            searchList.value[1].attrs.params = { siteId: val }
            searchList.value[2].attrs.params = { siteId: val }
            searchList.value[3].attrs.params = { siteId: val }
          },
        },
      },
      {
        prop: 'seriesIdList',
        label: '车系',
        type: 'remote-select',
        attrs: {
          type: 'carSeries_site',
          multiple: true,
          params: {
            siteId: queryParam.value.siteId,
          },
          change: (form, labelForm, searchList, val) => {
            form.value.modelIdList = undefined
            form.value.carIdList = undefined
            labelForm.value.modelIdList = undefined
            labelForm.value.carIdList = undefined
            searchList.value[2].attrs.params.seriesIdList = val
            searchList.value[3].attrs.params.seriesIdList = val
            searchList.value[3].attrs.params.modelIdList = undefined
          },
        },
      },
      {
        prop: 'modelIdList',
        label: '车型',
        type: 'remote-select',
        attrs: {
          type: 'multiple_carModel_site',
          multiple: true,
          params: {
            siteId: queryParam.value.siteId,
            seriesIdList: queryParam.value.seriesIdList,
          },
          change: (form, labelForm, searchList, val) => {
            form.value.carIdList = undefined
            labelForm.value.carIdList = undefined
            searchList.value[3].attrs.params.modelIdList = val
          },
        },
      },
      {
        prop: 'carIdList',
        label: '车牌号',
        type: 'remote-select',
        attrs: {
          show: activeTap.value == 'car-stock',
          type: 'licenseNo',
          multiple: true,
          params: {
            siteId: queryParam.value.siteId,
            seriesIdList: queryParam.value.seriesIdList,
            modelIdList: queryParam.value.modelIdList,
          },
        },
      },
      {
        prop: ['startTime', 'endTime'],
        label: '时间',
        type: 'daterange-picker',
        attrs: {
          mode: 'date',
          config: {
            start: {
              minDate: today.format('YYYY-MM-DD 00:00:00'),
            },
            end: {
              maxDate: today.add(100, 'day').format('YYYY-MM-DD 23:59:59'),
            },
          },
        },
      },
      {
        label: '订单渠道',
        prop: 'channelTypeList',
        type: 'remote-select',
        attrs: { multiple: true, title: '选择渠道', type: 'dict', outData: dict.channelTypeEnum, show: activeTap.value == 'car-stock' },
      },
    ]
  })

  const getDefaultSite = () => {
    // 可用门店
    getSiteList({ siteStatusList: ['10'] }).then((res) => {
      if (res.code == 200) {
        const site = res.result[0]
        if (site) {
          queryParam.value.siteId = site.id
          siteName.value = site.siteName
          loadData()
        }
      }
    })
  }

  onMounted(() => {
    // 获取数据，默认第一个门店
    getDefaultSite()
  })
  // 排车/改排完成 刷新数据 before
  onLoad(() => {
    uni.$on('carStock:loadData', () => {
      loadData()
    })
  })
  onUnload(() => {
    uni.$off('carStock:loadData')
  })
  // 排车/改排完成 刷新数据 end
</script>

<style lang="less" scoped>
  .container {
    min-height: 100%;
    height: auto;
  }
  .record-list {
    padding: 24rpx;
  }
  .tips {
    position: relative;
    display: flex;
    align-items: baseline;
    width: 100%;
    background: #e8f3ff;
    font-weight: 400;
    font-size: 24rpx;
    color: #1e1e1e;
    line-height: 44rpx;
    padding: 24rpx 14rpx 24rpx 64rpx;
    margin-bottom: 24rpx;
    .img {
      position: absolute;
      top: 30rpx;
      left: 24rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .order-type-list {
    display: flex;
    .order-type-item {
      width: 192rpx;
      height: 86rpx;
      text-align: center;
      font-size: 32rpx;
      color: #1d2129;
      position: relative;
      .order-type-item-border {
        width: 48rpx;
        height: 4rpx;
        background: transparent;
        border-radius: 4rpx;
        position: absolute;
        bottom: -2rpx;
        left: 50%;
        margin-left: -24rpx;
      }

      &.actived {
        color: #3072f6;
        .order-type-item-border {
          background: #3072f6;
        }
      }
    }
  }
</style>
